import React from 'react';
import ReactDOM from 'react-dom';
import ColorPicker from 'braft-extensions/dist/color-picker';
import Table from 'braft-extensions/dist/table';
import CodeHighlighter from 'braft-extensions/dist/code-highlighter';
import Emoticon, { defaultEmoticons } from 'braft-extensions/dist/emoticon';
import {convertFromHTML,ContentState,EditorState} from "draft-js";
// import BraftEditor from '../src_old';
import BraftEditor from '../src';
import {  ContentUtils } from 'braft-utils';
import "antd/dist/antd.css";

import '../dist/index.css';
import 'braft-extensions/dist/emoticon.css';
import 'braft-extensions/dist/color-picker.css';
import 'braft-extensions/dist/table.css';
import 'braft-extensions/dist/code-highlighter.css';
//
const emoticons = defaultEmoticons.map((item) =>
  require(`braft-extensions/dist/assets/${item}`),
);
const hooks = {
  'set-image-alignment': () => {
    return 'left';
  },
};

BraftEditor.use([
  Emoticon({
    emoticons: emoticons,
  }),
  // ColorPicker({
  //   theme: 'dark'
  // }),
  Table(),
  CodeHighlighter(),
]);

const realContent = '<p style="text-indent:2em;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false"></p><div class="media-wrap embed-wrap"><div><iframe src="//player.bilibili.com/player.html?aid=544829075&bvid=BV1Yi4y1P7Bd&cid=315756993&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div></div><div class="media-wrap video-wrap"><video controls="" class="media-wrap video-wrap" poster="http://oxiaoeyu.oss-cn-beijing.aliyuncs.com/9rmG3OGvoe/aodwJaG649/20201016/1602831737563305.png" width="52252px" height="617px" src="https://cdn.jsdelivr.net/gh/eyux/assets@latest/a/video/coffee.mp4"></video></div><p></p><p></p><p></p><p></p><div class="media-wrap video-wrap"><video controls="" class="media-wrap video-wrap" poster="http://oxiaoeyu.oss-cn-beijing.aliyuncs.com/9rmG3OGvoe/aodwJaG649/20210403/1617420433563064.jpeg" width="12px" height="12px" src="https://cdn.jsdelivr.net/gh/eyux/assets@latest/a/video/coffee11.mp4"></video></div><p></p><p></p><p>adadada</p>'
const initContent =
'<p data-foo="adasd" class="my-classname"><img src="https://www.baidu.com/img/bd_logo1.png?where=super" /><span style="color:#e25041;">asdasdasda</span>asdads</p><p>asda</p><p></p><div class="media-wrap image-wrap"><img src="http://oxiaoeyu.oss-cn-beijing.aliyuncs.com/9rmG3OGvoe/aodwJaG649/20210315/1615772806759605.jpeg" width="532" height="299.6875" style="width:532px;height:299.6875px"/></div><p></p>';

const sampleMarkup =
  '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
  '<a href="http://www.facebook.com">Example link</a>';

const blocksFromHTML = convertFromHTML(initContent);
const state = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap,
);


class App extends React.Component {
  constructor(props) {
    super(props);
    // console.warn('BraftEditor.createEditorState(state)',EditorState.createEditorState('sss').getCurrentContent())
    this.state = {
      readOnly: false,
      // EditorState.createWithContent(state)
      editorState:BraftEditor.createEditorState(realContent)
      // editorState: ContentUtils.createEditorState(state), // 设置编辑器初始内容
    };
  }

  handleChange = (editorState) => {
    // console.log('change',editorState.toHTML());
    this.setState({ editorState });
  };

  logHTML = () => {
    // console.log(this.state.editorState.toHTML());
  };

  logRAW = () => {
    console.log(this.state.editorState.toRAW());
  };

  render() {
    const { readOnly, editorState } = this.state;
    return (
      <div>
        <div className="demo" id="demo">
          {editorState && <BraftEditor
            language={'zh'}
            // colors={['#e25041']}
            // headings={['header-one', 'unstyled']}
            // placeholder="Hello World!"
            // fixPlaceholder
            // allowInsertLinkText
            // triggerChangeOnMount={false}
            // defaultValue={editorState}
            value={editorState}
            onChange={this.handleChange}
            mediaSetting={(e)=>{
              console.warn(e)
            }}
            // readOnly={readOnly}
            // hooks={hooks}
            // imageResizable
            // imageEqualRatio
          />}
        </div>
        <div className={'preview'}>
          {editorState && typeof editorState.toHTML === 'function' && editorState.toHTML()}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#root'));
